<?php
/* ------------------------------------------------------------
TEMPLATE DE VIDEOS
------------------------------------------------------------ */

$ANCHO_VIDEO = "800";
$ALTO_VIDEO = "462";

?>

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
	<title>Tesil</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    
	<link rel="stylesheet" type="text/css" href="css/styles.css<?php echo '?'.rand(0,1000);?>" />
    <link rel="stylesheet" type="text/css" href="css/jquery.bxslider.css<?php echo '?'.rand(0,1000);?>" />
	<link rel="stylesheet" type="text/css" href="css/flexslider.css<?php echo '?'.rand(0,1000);?>" />
    <link rel="stylesheet" type="text/css" href="css/demo.css<?php echo '?'.rand(0,1000);?>" />
    <link rel="stylesheet" type="text/css" href="css/jquery.bxslider.css<?php echo '?'.rand(0,1000);?>" />

	<script type="text/javascript" src="js/jquery.js<?php echo '?'.rand(0,1000);?>"></script>
    <script type="text/javascript" src="js/jquery.bxslider.js<?php echo '?'.rand(0,1000);?>"></script>
	<script type="text/javascript" src="js/jquery.bxslider.js<?php echo '?'.rand(0,1000);?>"></script>
	<script type="text/javascript" src="js/jquery.flexslider.js<?php echo '?'.rand(0,1000);?>"></script>
	<script>
	$(window).load(function() {
		// The slider being synced must be initialized first
		$('#carousel').flexslider({
			animation: "slide",
			controlNav: false,
			animationLoop: false,
			slideshow: false,
			itemWidth: 110,
			itemMargin: 5,
			asNavFor: '#slider'
		});
	 
		$('#slider').flexslider({
			animation: "slide",
			controlNav: false,
			animationLoop: false,
			slideshow: false,
			sync: "#carousel"
		});
	  
		function ready(player_id) {
			var froogaloop = $f(player_id);
			froogaloop.addEvent('play', function(data) {
				$('.flexslider').flexslider("pause");
			});
			froogaloop.addEvent('pause', function(data) {
				$('.flexslider').flexslider("play");
			});
		}

		// Call fitVid before FlexSlider initializes, so the proper initial height can be retrieved.
		$(".flexslider").fitVids().flexslider({
				animation: "slide",
				useCSS: false,
				animationLoop: false,
				smoothHeight: true,
				before: function(slider) {
					$f(player).api('pause');
				}
		});
	});
    </script>
	
</head>

<body id="video">
<div id="super">

	<?php 
		//MENU
		include_once "common/header.php";
		
		$listaVideos = crearLista("SELECT * FROM videos", $mysqli);
	?>
	
    <div id="wrappers">        

		<?php
				$template_video = '<li><iframe src="[urlVideo]" width="' . $ANCHO_VIDEO . '" height="' . $ALTO_VIDEO . '" frameborder="0" allowfullscreen></iframe></li>';
				$template_imagen = '<li><img src="[pathImagen]" title="[descripcion]"/></li>';
				
				$videos_finales = "";
				$thumbs_finales = "";
				
				foreach ($listaVideos as &$video) {
						$videos_finales = $videos_finales . '<li><iframe src="' . $video["url"]. '" width="' . $ANCHO_VIDEO . '" height="' . $ALTO_VIDEO . '" frameborder="0" allowfullscreen></iframe></li>';
						$thumbs_finales = $thumbs_finales . '<li><img src="' . $video["thumb"]. '" title="' . $video["descripcion"] . '"/></li>';
					}
					
		?>
        <div class="contenido">
            <div id="slider" class="flexslider">
              <ul class="slides">
                <?php echo $videos_finales; ?>
              </ul>
            </div>
            <div id="carousel" class="flexslider">
              <ul class="slides">
					<?php echo $thumbs_finales; ?>
              </ul>
            </div>
        </div>
    </div><!-- WRAPPERS  -->
    
    <?php include 'common/footer.php';  ?>  
	
</div><!-- SUPER  -->    

</body>
</html>